<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员进货</title>
    <link rel="stylesheet" href="../css/sign_in.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-link type="primary" href="admin.html" target="_self">管理员进货</el-link>
    <el-link type="primary" href="admin2.html" target="_self">查看销售统计</el-link>
    <el-link type="primary" href="sign.html" target="_self">返回登录页面</el-link>

    <br><br>
    <!--  表单数据: 进货订单信息 -->
    <el-button type="primary" round @click="dialogVisible = true">进货</el-button>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
        <el-table-column
                prop="id"
                label="id"
                width="80">
        </el-table-column>
        <el-table-column
                prop="bookId"
                label="书籍编号">
        </el-table-column>
        <el-table-column
                prop="bookName"
                label="书籍名称">
        </el-table-column>
        <el-table-column
                prop="bookPrice"
                label="书籍单价">
        </el-table-column>
        <el-table-column
                prop="bookQty"
                label="库存">
        </el-table-column>
    </el-table>

    <!--退单弹窗-->
    <el-dialog
            title="退货订单"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="书籍编号">
                <el-input v-model="form.bookId"></el-input>
            </el-form-item>
            <el-form-item label="供应商编号">
                <el-input v-model="form.supplierId"></el-input>
            </el-form-item>
            <el-form-item label="进货数量">
                <el-input v-model="form.addNumber"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addOrder()">进货</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
        </span>
    </el-dialog>
</div>

<script src="../js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    //var userName = window.sessionStorage.getItem('userName');

    new Vue({
        el: "#app",
        mounted() {
            // var _this = this;
            axios({
                method: "get",
                url: "/showBookInfo"
            }).then((res) => {
                this.tableData = res.data;
                console.log(this.tableData[0])
            })
        },
        data: {
            //var userName = window.sessionStorage.getItem('userName');
            tableData: [],
            dialogVisible: false,
            form: {
                bookId:'',
                supplierId:'',
                addNumber:''
            },
        },
        methods: {
            addOrder() {
                axios.post("/addOrder", this.form).then(
                    res => {
                        console.log(res)
                        if (res.data.flag == 1) {
                            this.dialogVisible = false;
                        } else {
                        }
                        alert(res.data.msg);
                    }
                )
            }
        }
    })
</script>
</body>
</html>